<template>
    <div>
        <h4>居民信息</h4>
        <div class="resident-grid-container">
            <!-- 1 -->
            <div>
                <span>居民编号</span>
                <div>
                    {{ residentDetailData._id }}
                </div>
            </div>
            <div>
                <span>姓名</span>
                <div>
                    {{ residentDetailData.name }}
                </div>
            </div>
            <div>
                <span>头像</span>
                <el-avatar :src="residentDetailData.avatar" :size="32"></el-avatar>
            </div>
            <div>
                <span>身份证号</span>
                <div>{{ residentDetailData.IDnumber }}</div>
            </div>
            <!-- 2 -->
            <div>
                <span>手机号码</span>
                <div>{{ residentDetailData.phone }}</div>
            </div>
            <div>
                <span>现居地</span>
                <div>{{ residentDetailData.address }}</div>
            </div>
            <div>
                <span>登录密码</span>
                <div>{{ residentDetailData.password }}</div>
            </div>
            <div>
                <span>行政区划</span>
                {{ residentDetailData.administrativeRegion }}
            </div>

            <!-- 3 -->
            <div>
                <span>居民标签</span>
                <template v-for="item in residentDetailData?.tagIds" :key="item">
                    <el-tag round>{{ item.name }}</el-tag>
                </template>
            </div>
            <div>
                <span>性别</span>
                <div>{{ residentDetailData.gender == 0 ? '男' : '女' }}</div>
            </div>
            <div>
                <span>出生日期</span>
                <div>{{ residentDetailData.birthday }}</div>
            </div>
            <div>
                <span>籍贯</span>

            </div>

            <!-- 4 -->
            <div>
                <span>民族</span>
                <div>{{ residentDetailData.nation }}</div>
            </div>
            <div>
                <span>文化程度</span>
                {{ residentDetailData.culture }}
            </div>
            <div>
                <span>婚姻状况</span>
                {{ residentDetailData.maritalStatus }}
            </div>
            <div>
                <span>职业</span>
                <div>{{ residentDetailData.profession }}</div>
            </div>

            <!-- 5 -->
            <div>
                <span>工作单位</span>
                <div>{{ residentDetailData.workUnit }}</div>

            </div>
            <div>
                <span>紧急联系人</span>

            </div>
            <div>
                <span>联系人电话</span>

            </div>
            <div>
                <span>户籍类型</span>
                {{ residentDetailData.domicileType }}
            </div>

            <!-- 6 -->
            <div>
                <span>费用类型</span>
                <div>{{ residentDetailData.costType }}</div>
            </div>
            <div>
                <span>定点医疗单位</span>
                <div>{{ residentDetailData.hospital }}</div>
            </div>
            <div>
                <span>来源</span>
                <div>{{ residentDetailData.origin }}</div>
            </div>
        </div>


        <h3>健康信息</h3>
        <div class="resident-grid-container">
            <div>
                <span>身高</span>
                <div>{{ residentDetailData.height }}</div>
            </div>
            <div>
                <span>体重</span>
                <div>{{ residentDetailData.weight }}</div>
            </div>
            <div>
                <span>血型</span>
                {{ residentDetailData.bloodType }}
            </div>
            <div>
                <span>RH阴性</span>
                {{ residentDetailData.RH == 0 ? '是' : '否' }}
            </div>

            <div>
                <span>过敏史</span>
                {{ residentDetailData.allergy }}
            </div>
            <div>
                <span>既往史</span>
                {{ residentDetailData.pastMedical ?? '无' }}
            </div>
            <div>
                <span>就诊史</span>

            </div>
            <div>
                <span>家族病史</span>
                {{ residentDetailData.familyMedical ?? '无' }}
            </div>
        </div>

        <h3>家庭成员</h3>
        <div class="flex-ac">
            <template v-for="item in 2" :key="item">
                <el-card class="family-card" shadow="hover">
                    <div style="width: 160px;" class="flex-ac">
                        <el-avatar :src="residentDetailData.avatar" :size="40"></el-avatar>
                        <div class="family-card-text">
                            <span>李青</span>
                            <span>58岁</span>
                            <img src="../../../../assets/sexy.png" />
                            <p>关系：父母</p>
                        </div>
                    </div>
                </el-card>
            </template>
        </div>
    </div>

    <el-button type="primary" @click="pageToUpdate()">编辑档案信息</el-button>
    <el-button @click="$router.back()">返回</el-button>
</template>

<script setup>

import { onMounted, ref, watchEffect } from 'vue';
import { getRelationSearchApi } from '../../../../api/residents';
import { useRouter } from 'vue-router';

const router = useRouter()
const props = defineProps(['residentDetailData'])
const relations = ref([])

onMounted(() => {
    getRelations()
})
watchEffect(() => {
    getRelations();
})

function getRelations() {

    if (props.residentDetailData.relationIds?.length > 0) {
        getRelationSearchApi({ ownId: props.residentDetailData.relationIds })
            .then(res => {
                relations.value = res.data;
            })
    }

}

function pageToUpdate(){
    const _id = props.residentDetailData._id;
    router.push({ path:'/resident/update/:_id',query:{_id}})
}

</script>

<style scoped lang="scss">
h3,
h4 {
    margin-top: 20px;
    margin-bottom: 20px;
}

.resident-grid-container {
    font-size: 13px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);

    span {
        margin-right: 10px;
        flex-shrink: 0;
        color: #999;
    }
}

.resident-grid-container>div {
    display: flex;
    min-height: 50px;
}

.family-card {
    width: 200px;
    height: 84px;
    margin-bottom: 30px;
    display: flex;
    margin-right: 20px;
    .el-avatar{
        margin-right: 10px;
    }
}

.family-card-text {
    font-size: 12px;
    color: #999;
    margin-left: 10px;

    span:first-child {
        font-size: 16px;
        color: #333;
        margin-right: 10px;
        margin-bottom: 20px;
    }

    img {
        width: 8px;
        height: 11px;
        margin-left:15px;
        transform: rotate(-30deg);
    }
}
.el-button{
    height: 40px;
}
</style>